<template>
  <entity-view :operator-type="operatorType" :model="beanInfo" @submit="submit" :rules="rules" ref="form">
    <div class="subtitle">基本信息</div>
    <div class="sub-content-flex">
      <form-item label="集团商户编号" v-model="beanInfo.groupMchntNo" prop="groupMchntNo" disabled></form-item>
      <form-item label="集团商户名称" v-model="beanInfo.groupMchntName" prop="agentName"></form-item>
      <form-item label="是否集中收款" inputType="radioGroup" v-model="beanInfo.isMassReceive" prop="isMassReceive"
        :options="isMassReceiveList" @change="(value) => handleChange(value, 'isMassReceive')"></form-item>
      <form-item label="创建机构" v-model="beanInfo.crtOrgName" prop="crtOrgName" disabled></form-item>
      <form-item label="经营范围" inputType="select" v-model="beanInfo.managementScope" prop="managementScope"
        :options="managementScopeList" @click.native="getManagementScopeList()"
        @change="(value) => handleChange(value, 'managementScope')"></form-item>
      <form-item label="银联商户类别" inputType="select" v-model="beanInfo.cupsMcc" prop="cupsMcc" :options="cupsMccList"
        @click.native="getIndustryTypeList()" @change="(value) => handleChange(value, 'cupsMcc')"></form-item>
    </div>
    <div class="subtitle">集团证件信息</div>
    <div class="sub-content-flex">
      <form-item label="注册号" v-model="beanInfo.licenceCode" prop="licenceCode"></form-item>
      <form-item label="注册类型" v-model="beanInfo.licenceType" prop="licenceType" inputType="select"
        :options="licenceTypeList" @change="(value) => handleChange(value, 'licenceType')"></form-item>
      <form-item label="注册资本" v-model="beanInfo.registerCapital" prop="registerCapital" inputType="select"
        :options="registerCapitalList" @change="(value) => handleChange(value, 'registerCapital')"></form-item>
      <form-item label="生效日期" v-model="beanInfo.licenceEffectiveDate" prop="licenceEffectiveDate"
        input-type="datepicker" format="YYYYMMDD"></form-item>
      <form-item label="失效日期" prop="licenceExpiryDate">
        <a-date-picker v-model="beanInfo.licenceExpiryDate" allow-clear format="YYYYMMDD"
          :disabled="this.operatorType === 'view' || this.operatorType === 'cancel'">
          <a-input v-if="beanInfo.licenceExpiryDate === '长期'" allow-clear v-model="beanInfo.licenceExpiryDate">
          </a-input>
        </a-date-picker>
        <a v-if="this.operatorType !== 'view' && this.operatorType !== 'cancel'" href="javascript:"
          @click="setLongTime('licenceExpiryDate')" style="margin-left: 10px">长期</a>
      </form-item>
      <form-item label="营业执照注册地址－省" v-model="beanInfo.registerProvince" inputType="select" prop="registerProvince"
        :options="registerProvinceList" @click.native="getProvince()"
        @change="(value) => handleChange(value, 'registerProvince')"></form-item>
      <form-item label="营业执照注册地址－市" v-model="beanInfo.registerCity" inputType="select" prop="registerCity"
        :options="registerCityList" @click.native="getCity()" @change="(value) => handleChange(value, 'registerCity')">
      </form-item>
      <form-item label="营业执照注册地址－区" v-model="beanInfo.registerArea" inputType="select" prop="registerArea"
        :options="registerAreaList" @click.native="getArea()" @change="(value) => handleChange(value, 'registerArea')">
      </form-item>
      <form-item label="详细地址" v-model="beanInfo.registerAddr" prop="registerAddr" input-type="textarea"></form-item>
    </div>
    <div class="subtitle">集团法人信息</div>
    <div class="sub-content-flex">
      <form-item label="法人姓名" v-model="beanInfo.artifName" prop="artifName"></form-item>
      <form-item label="法人身份证号码" v-model="beanInfo.artifCertNo" prop="artifCertNo" :maxLength="20"></form-item>
      <form-item label="法人联系电话" v-model="beanInfo.artifMobile" prop="artifMobile"></form-item>
    </div>
    <div class="subtitle">集团联系人信息</div>
    <div class="sub-content-flex">
      <form-item label="联系人姓名" v-model="beanInfo.contactName" prop="contactName"></form-item>
      <form-item label="联系人电话" v-model="beanInfo.contactPhone" prop="contactPhone"></form-item>
      <form-item label="联系人邮箱" v-model="beanInfo.contactEmaiil" prop="contactEmaiil"></form-item>
    </div>
    <div class="subtitle" v-if="beanInfo.isMassReceive === '1'">结算账户信息</div>
    <div class="sub-content-flex" v-if="beanInfo.isMassReceive === '1'">
      <form-item label="结算账户类型" inputType="select" v-model="beanInfo.settleAcctType" prop="settleAcctType"
        :options="settleAcctTypeList" @change="(value) => handleChange(value, 'settleAcctType')"></form-item>
      <form-item label="结算账号" v-model="beanInfo.settleAcctNo" prop="settleAcctNo"></form-item>
      <form-item label="开户名称" v-model="beanInfo.settleAcctName" prop="settleAcctName"></form-item>
      <form-item label="开户行所在省" v-model="beanInfo.acctOpenProvince" inputType="select" prop="acctOpenProvince"
        :options="acctOpenProvinceList" @click.native="getAcctOpenProvince()"
        @change="(value) => handleChange(value, 'acctOpenProvince')"></form-item>
      <form-item label="开户行所在市" v-model="beanInfo.acctOpenCity" inputType="select" prop="acctOpenCity"
        :options="acctOpenCityList" @click.native="getAcctOpenCity()"
        @change="(value) => handleChange(value, 'acctOpenCity')"></form-item>
      <form-item label="开户行所在区" v-model="beanInfo.acctOpenArea" inputType="select" prop="acctOpenArea"
        :options="acctOpenAreaList" @click.native="getAcctOpenArea()"
        @change="(value) => handleChange(value, 'acctOpenArea')"></form-item>
      <form-item label="开户行行号" inputType="select" v-model="beanInfo.acctOpenBankNo" prop="acctOpenBankNo"
        :options="acctOpenBankNoList" @change="bankNoChange" allowClear="true" :showSearch="true"
        @search="getBankNameCode"></form-item>
      <form-item label="开户行名称" v-model="beanInfo.acctOpenBankName" prop="acctOpenBankName" disabled></form-item>
    </div>
    <div class="subtitle" v-if="operatorType === 'view' || operatorType === 'cancel'">注销信息</div>
    <div class="sub-content-flex" v-if="operatorType === 'view' || operatorType === 'cancel'">
      <form-item label="注销原因" v-model="beanInfo.cancelReason" prop="cancelReason" inputType="textarea"
        v-if="operatorType === 'view' || operatorType === 'cancel'"></form-item>
    </div>
  </entity-view>
</template>
<script>
import EntityView from "../../../../components/common/entityView/EntityView.vue";
import FormItem from "../../../../components/common/entityView/FormItem.vue";
import moment from 'moment';
export default {
  name: "MarketInfoOperation",
  components: {
    EntityView,
    FormItem,
  },
  props: {
    query: Object,
  },
  data: function () {
    const checkLicenceExpiryDate = (rule, value, cb) => {
      const licenceEffectiveDate = moment(this.beanInfo.licenceEffectiveDate).format('YYYYMMDD')
      const licenceExpiryDate = moment(value).format('YYYYMMDD')
      if (licenceExpiryDate < licenceEffectiveDate) {
        cb(new Error('失效日期应该晚于生效日期'))
      } else {
        cb()
      }
    }
    const checkLicenceEffectiveDate = (rule, value, cb) => {
      if (this.beanInfo.licenceExpiryDate) {
        const licenceExpiryDate = moment(this.beanInfo.licenceExpiryDate).format('YYYYMMDD')
        const licenceEffectiveDate = moment(value).format('YYYYMMDD')
        if (licenceEffectiveDate > licenceExpiryDate) {
          cb(new Error('生效日期应该早于失效日期'))
        } else {
          cb()
        }
      }else{
        cb()
      }
    }
    return {
      modalTitle: "",
      operatorType: "add",
      modalVisible: true,
      selectedRowKeys: [],
      beanInfo: {
        instId: "",
        groupMchntNo: "",
        crtOrgName: "",
      },
      rules: {
        groupMchntNo: [{ required: true, message: "必输", trigger: "blur" }],
        groupMchntName: [{ required: true, message: "必输", trigger: "blur" }],
        isMassReceive: [{ required: true, message: "必输", trigger: "blur" }],
        managementScope: [{ required: true, message: "必输", trigger: "blur" }],
        cupsMcc: [{ required: true, message: "必输", trigger: "blur" }],
        licenceCode: [{ required: true, message: "必输", trigger: "blur" }],
        licenceType: [{ required: true, message: "必输", trigger: "blur" }],
        licenceEffectiveDate: [{ required: true, message: "必输" },
        { trigger: "change", validator: checkLicenceEffectiveDate }
        ],
        licenceExpiryDate: [{ required: true, message: "必输" },
        { trigger: "change", validator: checkLicenceExpiryDate }
        ],
        registerProvince: [{ required: true, message: "必输", trigger: "blur" }],
        registerCity: [{ required: true, message: "必输", trigger: "blur" }],
        registerArea: [{ required: true, message: "必输", trigger: "blur" }],
        registerAddr: [{ required: true, message: "必输", trigger: "blur" }],
        dstChannelName: [{ required: true, message: "必输", trigger: "blur" }],
        artifName: [{ required: true, message: "必填", trigger: "blur" }],
        artifCertNo: [{ required: true, message: "必填", trigger: "blur" }, { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/, message: '请输入有效的身份证号码', trigger: 'blur' }],
        artifMobile: [{ required: true, message: "必填", trigger: "blur" }, { pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: 'blur' }],
        settleAcctType: [{ required: true, message: "必填", trigger: "blur" }],
        settleAcctNo: [{ required: true, message: "必填", trigger: "blur" }],
        settleAcctName: [{ required: true, message: "必填", trigger: "blur" }],
        acctOpenBankNo: [{ required: true, message: "必填", trigger: "blur" }],
        acctOpenBankName: [{ required: true, message: "必填", trigger: "blur" }],
        cancelReason: [{ required: true, message: "必填", trigger: "blur" }],
      },
      registerProvinceList: [],
      registerCityList: [],
      registerAreaList: [],
      acctOpenProvinceList: [],
      acctOpenCityList: [],
      acctOpenAreaList: [],
      managementScopeList: [],
      cupsMccList: [],
      licenceTypeList: [
        { value: "", name: "-请选择-" },
        { value: "00", name: "营业执照" },
        { value: "01", name: "机构信用代码证" },
        { value: "02", name: "民办非企业登记证书" },
        { value: "03", name: "全国组织机构代码证" },
        { value: "04", name: "事业单位法人证书" },
        { value: "05", name: "境外企业证书" },
        { value: "06", name: "社会团体法人登记证书" },
        { value: "07", name: "工会法人资格证书" },
        { value: "08", name: "政府批文" },
        { value: "09", name: "预先核准通知书" },
        { value: "10", name: "其他批文或证明" },
        { value: "11", name: "贷款卡号" },
        { value: "99", name: "其他" },
      ],
      registerCapitalList: [
        { value: "", name: "-请选择-" },
        { value: "1", name: "10万以下" },
        { value: "2", name: "10万-100万" },
        { value: "3", name: "100万-500万" },
        { value: "4", name: "500万-1000万" },
        { value: "5", name: "10000万以上" },
      ],
      isMassReceiveList: [
        { value: "1", label: "是" },
        { value: "0", label: "否" },
      ],
      acctOpenBankNoList: [],
      settleAcctTypeList: [
        { value: '00', name: '本行借记账户' },
        { value: '01', name: '本行贷记账户' },
        { value: '02', name: '本行存折' },
        { value: '03', name: '本行内部户' },
        { value: '10', name: '他行借记账户' },
        { value: '11', name: '他行贷记账户' },
        { value: '12', name: '他行存折' },
        { value: '13', name: '他行内部户' }
      ],
      loading: false,
      pageInfo: {},
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    handleChange(value, param) {
      this.beanInfo[param] = value;
      if (param === 'managementScope') {
        this.beanInfo.cupsMcc = '';
      }
      if (param === 'registerProvince') {
        this.beanInfo.registerCity = '';
        this.beanInfo.registerArea = '';
      }
      if (param === 'registerCity') {
        this.beanInfo.registerArea = '';
      }
    },
    warning(message) {
      const h = this.$createElement;
      this.$warning({
        title: '提示',
        content: h('div', {}, [
          h('p', message),
        ]),
        onOk() { },
      });
    },
    async submit() {
      let res;
      switch (this.operatorType) {
        case "add":
          res = await this.edit();
          break;
        case "edit":
          res = await this.edit();
          break;
        case "cancel":
          res = await this.edit();
          break;
        case "view":
          res = true;
          break;
        default:
          break;
      }
      return res;
    },
    async edit() {
      const res = await this.$refs.form.validate();
      if (res) {
        let optFlag = { add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel` }[this.operatorType]
        const params = {
          ...this.beanInfo,
          optFlag: optFlag,
        };
        if (params.licenceEffectiveDate) {
          params.licenceEffectiveDate = moment(params.licenceEffectiveDate).format('YYYYMMDD')
        }
        if (params.licenceExpiryDate && this.beanInfo.licenceExpiryDate !== '长期') {
          params.licenceExpiryDate = moment(params.licenceExpiryDate).format('YYYYMMDD')
        }
        console.log(params);
        const res = await this.$post("/admin/merParam/marketInfo/edit", params);
        if (res.status === 200) {
          this.$message.success("保存成功！");
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      }
    },
    resetFields() {
      return this.$refs.form && this.$refs.form.resetFields();
    },
    setOperatorType(type) {
      this.operatorType = type;
    },
    setLongTime(field) {
      this.$set(this.beanInfo, field, '20991231')
    },
    async setBeanInfo({ ...beanInfo }, instId) {
      this.beanInfo = beanInfo;
      this.instId = instId;
      if (this.operatorType === 'add') {
        await this.getEditList()
        return
      }
      await this.getManagementScopeList();
      await this.getOne();
      await this.getIndustryTypeList();
      await this.getProvince();
      await this.getCity();
      await this.getArea();
      if (this.beanInfo.isMassReceive === '1') {
        await this.getAcctOpenProvince();
        if (typeof this.beanInfo.acctOpenCity !== 'undefined') {
          await this.getAcctOpenCity();
        }
        if (typeof this.beanInfo.acctOpenArea !== 'undefined') {
          await this.getAcctOpenArea();
        }
        await this.getBankNameCode();
      }
    },
    async getOne() {
      try {
        const res = await this.$get("/admin/merParam/marketInfo/edit", {
          id: this.beanInfo.id,
          optFlag: "detail",
        });
        this.beanInfo = res.data.entity || {};
      } catch (e) {
        console.error(e);
      }
    },
    async getEditList() {
      try {
        const res = await this.$get("/admin/merParam/marketInfo/edit", {
          optFlag: "add",
          instId: this.instId,
        });
        if (res.status === 200) {
          this.beanInfo = res.data.entity || {};
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getManagementScopeList() {
      try {
        const res = await this.$get("/admin/mcmp/bMchntBaseInfo/unionMerGrpSelect2List", {
          q: encodeURIComponent(`&${this.instId}`)
        });
        if (res.status === 200) {
          this.managementScopeList = res.data.rows.map(i => {
            i.name = i.grpNo + ' - ' + i.grpDesc
            i.value = i.grpNo
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getIndustryTypeList() {
      try {
        if (typeof this.beanInfo.managementScope === 'undefined') {
          this.warning("请先选择经营范围");
          return;
        }
        const res = await this.$get("/admin/mcmp/bMchntBaseInfo/indusSelect2List", {
          q: encodeURIComponent(`&${this.beanInfo.managementScope}`)
        });
        if (res.status === 200) {
          this.cupsMccList = res.data.rows.map(i => {
            i.name = i.industryType + ' - ' + i.industryDesc
            i.value = i.industryType
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getProvince() {
      try {
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          l: "01"
        });
        if (res.status === 200) {
          this.registerProvinceList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getCity() {
      try {
        if (typeof this.beanInfo.registerProvince === 'undefined') {
          this.warning("请先选择省");
          return;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p: this.beanInfo.registerProvince,
          l: "02"
        });
        if (res.status === 200) {
          this.registerCityList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getArea() {
      try {
        if (typeof this.beanInfo.registerCity === 'undefined') {
          this.warning("请先选择市");
          return;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p: this.beanInfo.registerCity,
          l: "03"
        });
        if (res.status === 200) {
          this.registerAreaList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getAcctOpenProvince() {
      try {
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          l: "01"
        });
        if (res.status === 200) {
          this.acctOpenProvinceList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getAcctOpenCity() {
      try {
        if (typeof this.beanInfo.acctOpenProvince === 'undefined') {
          this.warning("请先选择省");
          return;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p: this.beanInfo.acctOpenProvince,
          l: "02"
        });
        if (res.status === 200) {
          this.acctOpenCityList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getAcctOpenArea() {
      try {
        if (typeof this.beanInfo.acctOpenCity === 'undefined') {
          this.warning("请先选择市");
          return;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p: this.beanInfo.acctOpenCity,
          l: "03"
        });
        if (res.status === 200) {
          this.acctOpenAreaList = res.data.map(i => {
            i.name = i.id + ' - ' + i.name
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getBankNameCode(val = '') {
      const res = await this.$get("/admin/mcmp/bMchntBaseInfo/bankNameCodeQuerySelect2List", {
        q: encodeURIComponent(val + `&${this.instId}`),
      });
      if (res.status === 200) {
        this.acctOpenBankNoList = res.data.results.map(i => {
          i.name = i.id + ' - ' + i.name
          i.value = i.id
          return i
        })
      }
    },

    bankNoChange(value) {
      this.$set(this.beanInfo, 'acctOpenBankNo', value)
      this.$set(this.beanInfo, 'acctOpenBankName', (this.acctOpenBankNoList.filter(i => {
        return i.id === value
      }))[0].name.split("-")[1])
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../static/less/Common";

.subtitle {
  width: 100%;
  font-size: 18px;
  margin-bottom: 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
</style>
